<template>
 
 <el-container>
  
    <el-main>



 <el-table
      :data="tableData"
      style="width: 100%">
       <el-table-column
        prop="order"
        label="订单ID"
        width="180">
      </el-table-column>

      <el-table-column
        prop="date"
        label="下单日期"
        width="180">
      </el-table-column>

      <el-table-column
        prop="name"
        label="用户名"
        width="180">
      </el-table-column>

      <el-table-column
        prop="item"
        label="商品"
        width="180">
      </el-table-column>

      <el-table-column
        prop="address"
        label="邮寄地址">
      </el-table-column>

       <el-table-column
        label="取消订单">
          <el-link type="primary" @click="cancelOrder">取消订单</el-link>
      </el-table-column>
     
    </el-table>



  </el-main>



  <el-button type="primary" size="mini" @click="home">回到主页</el-button>
  
</el-container>


 
</template>



<script>


export default {
      data() {
        return {
          tableData: [{
            order: localStorage.orderId,
            date: localStorage.date,
            name: localStorage.username,
            item: localStorage.item,
            address: localStorage.address,
          }, {
            
          }, {
           
          }, {
          
          }, {
          
          }, {
          
          }, {
          
          }, {
          
          }, {
          
          }
          
          ]
        }
      },

      methods:{
      home(){
        this.$router.push({ path:"/" }) 
      },


      cancelOrder(){
        this.$api.cancelOrder(localStorage.orderId)
        .then(res =>{
             console.log(res.data);
             if(res.data.status==200){
               alert("您的订单已取消,订单号为"+localStorage.getItem("orderId"));
               localStorage.removeItem("orderId");
               localStorage.removeItem("date");
               localStorage.removeItem("item");
               localStorage.removeItem("address");
               //this.$router.push({ path:"/usercenter" }) 
             }else{
               alert("服务器繁忙，请稍后再试。");
             }
            

        })

      },

      }
}





</script>


<style scoped>

.el-header {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    font-size:20px;
    
    line-height: 60px;
    
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
</style>